<template>
		<view class="warn" @click="changeList()">
			<view class="top">
				{{ warning.item }}
			</view>
			<view class="bottom">
				<view class="left">
					<view class="text">
						<image src="@/static/image/notice/risk.svg" />
						<text class="title">风险等级</text>
						<text :style="{ color: gradeColor(warning.level) }">{{ warning.level }}</text>
					</view>
					<view class="text">
						<image src="@/static/image/notice/adrees.svg" />
						<text class="title">预警对象</text>
						<text class="name">{{ nameShow(warning.target_name) }}</text>
						<!-- <text class="status">全部收到</text> -->
					</view>
					<view class="text">
						<image src="@/static/image/notice/time.svg" />
						<text class="title">审核时间</text>
						<text>{{ warning.audit_time | timeFormat('YYYY-MM-DD')}}</text>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		name: "warn-list",
		props: {
			warning:''
		},
		methods: {
			gradeColor(val) {
				let res = "";
				switch (val) {
					case "低":
						res = "#2E73FC";
						break;
					case "中":
						res = "orange";
						break;
					case "高":
						res = "red";
						break;
				}
				return res;
			},
				
			nameShow(arr){
				let a=''
				if(arr.length===1){
					a = arr[0]
				}else if(arr.length===1){
					a = `${arr[0]}，${arr[1]}`
				}else{
					a = `${arr[0]}，${arr[1]}等${arr.length}人`
				}
				return a
			},
			changeList() {
				uni.navigateTo({
					url: `/pages/notice/record/detail/detail?id=${this.warning._id}&msg=false&por=true`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/common.scss";
		.warn {
			width: 100%;
			height: 300rpx;
			background-color: #fff;
			border-radius: 16rpx;
			@include compress;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-bottom: 30rpx;
			position: relative;

			.temp {
				width: 92rpx;
				height: 44rpx;
				background-color: #2a84e0;
				color: #fff;
				font-size: 26rpx;
				text-indent: 25rpx;
				line-height: 44rpx;
				border-radius: 0 12rpx 12rpx 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.top {
				font-size: 32rpx;
				width: 600rpx;
				overflow: hidden; 
				white-space: nowrap; 
				text-overflow: ellipsis;
			}

			.bottom {
				color: #a0a7b8;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;

				.left {
					.text {
						margin-bottom: 20rpx;
						color: #000623;
						.title {
							margin-right: 30rpx;
							color:#A0A7B8 ;
						}

						.status {
							width: 104rpx;
							height: 32rpx;
							font-size: 22rpx;
							color: #8890a5 !important;
							background-color: #ebeef5;
							padding: 5rpx;
							box-sizing: border-box;
							border-radius: 4rpx;
						}

						.name {
							color: #000;
							margin-right: 10rpx;
						}

						image {
							width: 28rpx;
							height: 28rpx;
							vertical-align: middle;
							margin-right: 10rpx;
						}
					}

					& .text:last-child {
						margin: 0;
					}
				}

				.right {
					image {
						width: 100rpx;
						height: 100rpx;
						display: block;
					}
				}
			}
		}
</style>
